<template>
  <div class="page">
    <scroll-view scroll-y
                 class="scrollPage">
      <view class="header">
        <view class="avatar round"
              style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
        <div class="name"> 昵称</div>
        <div class="container">
          <div class="wave" />
        </div>
      </view>

      <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
        <view class="cu-item arrow">
          <navigator class="content"
                     url="./introduce"
                     hover-class="none">
            <text class="cuIcon-apps text-yellow"></text>
            <text class="text-grey">功能介绍</text>
          </navigator>
        </view>

        <view class="cu-item arrow">
          <view class="content"
                @tap="CopyLink"
                data-link="https://gitee.com/">
            <text class="cuIcon-github text-grey"></text>
            <text class="text-grey">开源地址</text>
          </view>
        </view>

        <view class="cu-item arrow">
          <navigator class="content"
                     url="./help"
                     hover-class="none">
            <text class="cuIcon-formfill text-green"></text>
            <text class="text-grey">帮助中心</text>
          </navigator>
        </view>

        <view class="cu-item arrow">
          <button class="cu-btn content"
                  open-type="feedback">
            <text class="cuIcon-writefill text-cyan"></text>
            <text class="text-grey">意见反馈</text>
          </button>
        </view>
        <view class="cu-item arrow">
          <navigator class="content"
                     url="./author"
                     hover-class="none">
            <text class="cuIcon-creativefill text-orange"></text>
            <text class="text-grey">关于作者</text>
          </navigator>
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </div>
</template>
 <script>
export default {
  data () {
    return {
      animationData: {}
    }
  },

  methods: {
    CopyLink (e) {
      wx.setClipboardData({
        data: e.currentTarget.dataset.link,
        success: res => {
          wx.showToast({
            title: '已复制',
            duration: 1000,
          })
        }
      })
    },
  }
}

 </script>
 <style scoped lang="scss">
.page {
  min-width: 100%;
  padding: 0;
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar {
      width: 100px;
      height: 100px;
      margin-top: 10px;
    }
    .name {
      margin: 20px;
    }
  }
}

.container {
  width: 100%;
  height: 50px;
  padding: 5px;
  overflow: hidden;
}
.wave {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #76daff;
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 780px;
    height: 780px;
    top: -200px;
    left: 50%;
    background-color: $theme-bgc-opacity2;
    border-radius: 45%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 6s linear infinite;
    z-index: 10;
  }
  &::after {
    border-radius: 47%;
    background-color: $theme-bgc-opacity1;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 10s linear -5s infinite;
    z-index: 20;
  }
}
@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}
</style> 